<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>更换头像</title>
    <style>
        article{
            width: 500px;
            height: 700px;
            margin: auto;
            border: 1px solid goldenrod;
            text-align: center;
        }
        img{
            width: 150px;height: 150px;
        }
        article>div{
            border: 2px solid #41aef2;
            width: 450px;
            height: 450px;
            margin: auto;
            display: none;
            flex-wrap: wrap;
        }
    </style>

    <script>
        var faceObj;
        //等文档加载完成之后，再执行js函数
            window.onload=function (){
              faceObj  = document.getElementById("choose");
              //得到divObj对象中，所有img子标签数组
                var imgArray= document.getElementsByTagName("img");
                for (var i=0;i<imgArray.length;i++){
                    imgArray[i].onclick=function (){
                        chooseFace(this);
                        // alert(this.src);
                    }
                }
            }
        function showFace(){
            faceObj.style.display="flex";
        }
        function chooseFace(select){
            faceObj.style.display="none";
            var newObj=document.getElementById("face");
            newObj.src=select.src;
        }
    </script>
</head>
<body>
    <article>
        <img src="img/yihan2.JPG" alt="头像" id="face">
        <input type="button" value="选择头像" onclick="showFace()">
        <div id="choose">
            <img src="img/yuwen1.JPG" alt="于雯" id="one" onclick="chooseFace(this)">
            <img src="img/yihan1.JPG" alt="于雯" id="two" onclick="chooseFace(this)">
            <img src="img/yuwen2.JPG" alt="于雯" id="six" onclick="chooseFace(this)">
            <img src="img/yihan2.JPG" alt="于雯" id="three" onclick="chooseFace(this)">
            <img src="img/jiaxin1.JPG" alt="于雯" id="seven" onclick="chooseFace(this)">
            <img src="img/yihan3.JPG" alt="于雯" id="four" onclick="chooseFace(this)">
            <img src="img/yihan1.JPG" alt="于雯" id="eight" onclick="chooseFace(this)">
            <img src="img/yihan4.JPG" alt="于雯" id="five" onclick="chooseFace(this)">
            <img src="img/yuwen1.JPG" alt="于雯" id="nine" onclick="chooseFace(this)">
        </div>
    </article>
</body>
</html>